<template>
  <div class="border flexStartDetween">
    <!-- API接入信息() -->
    <div class="width40">
      <p class="title-title">{{ data.title == 'OMG' ? t('661') : t('792') }}</p>
      <div class="infoBox width100">
        <div class="contentItem flexBetween textCenter" v-for="(item, index) in data.infoList" :key="index"
          v-show="item.show" style="margin-top: -1px;">
          <div :class="item.key != 'documentApi' ? 'width30' : 'textCenter width100 title-title borderLR'">
            <el-tooltip effect="dark" placement="top" v-if="item.key != 'documentApi'">
              <template #content>{{ item.tips }}</template>
              <el-icon class="ques-tips">
                <QuestionFilled />
              </el-icon>
            </el-tooltip>
            {{ item.label }}
          </div>
          <div class="width65 colorGre" v-if="item.key == 'app_id'">
            {{ item.value }}
          </div>
          <div class="width65 color44" v-else-if="item.key == 'area'">{{
            data.lang == 'c_base_zh_cn' ? selectToLabel(COUNTRY,
              item.value):item.value }} / {{ data.addQuery.currency }}</div>
          <div class="width65 color44 flex" v-else-if="item.key == 'domain_name'" style="height: 50px;">
            <div class="width80 text-cut">{{ item.value }}</div>
            <el-button class="marginL10 marginR5" size="small" type="warning" @click="data.isShowDetails = true">{{
              item.value ?
                t('98') : t('340')+t('93') }}</el-button>
          </div>
          <div class="width65" v-else-if="item.key == 'api_type'"><el-tag style="font-size: 14px;" size="large">
              {{ selectToLabel(APITYPE, item.value) }}</el-tag></div>
          <div class="width65 color44 flex" v-else-if="item.key == 'key'" style="height: 50px;">
            <div class="width80 text-cut">{{ item.value }}</div>
            <el-button class="marginL10 marginR5" size="small" type="warning" @click="data.isShowDetails = true">{{
              item.value ?
                t('98') : t('340')+t('96') }}</el-button>
          </div>
          <div class="width65" v-else-if="item.key == 'status'"> <el-tag :type="item.value ? 'success' : 'danger'"
              style="font-size: 14px;" size="large">
              {{ selectToLabel(DEMOPLAY, item.value) }}</el-tag>
          </div>
          <div class="width65 color44" v-else-if="item.key == 'created_at'">{{ setTimestampTime(item.value as number) }}
          </div>
          <div class="width65 color44" v-else-if="item.key == 'document'">
            <el-button class="documentBtn" :text="true" size="small" type="success"
              @click="download('https://www.showdoc.com.cn/2531533114615809')">
              {{ t('662') }}
            </el-button>
            <el-button class="documentBtn" :text="true" size="small" type="primary"
              @click="download('https://www.showdoc.com.cn/2485927944770828/0')">
              {{ t('663') }}
            </el-button>
          </div>
          <div class="width65 color44" v-else-if="item.key == 'password'">123456</div>
          <div :class="item.key != 'documentApi' ? 'width65 color44' : ''" class="" v-else>{{ item.value }}</div>
        </div>
        <div class="contentItem textCenter" style="margin-top: -1px;border-left: none;">
          <div class="width100 flexCenter">
            <el-tooltip effect="dark" placement="top">
              <template #content>{{t('934')}}</template>
              <el-icon class="ques-tips">
                <QuestionFilled />
              </el-icon>
            </el-tooltip>
            {{t('935')}}
          </div>
          <div class="width100 borderTop flex padding10">
            <el-select class="imWidth90px" v-model="data.addQuery.type" :placeholder="t('340')" size="default">
              <el-option label="http://" value="http://" />
              <el-option label="https://" value="https://" />
            </el-select>
            <el-input class="width320" type="text" :placeholder="t('936')" v-model="data.addQuery.link" clearable
              size="default" style="font-size: 14px;" />
            <el-button class="marginL5" size="default" type="primary" :disabled="data.addQuery.link?false:true"
              @click="saveLink">{{t('241')}}</el-button>
          </div>
        </div>
      </div>
    </div>
    <!-- 域名信息 -->
    <div class="width58">
      <div class="flexBetween">
        <p class="title-title" style="width: 95%;"> {{ data.title == 'OMG' ? t('664') : t('793') }}</p>
        <p class="title-title" style="width:20.9%;border-left: none;">{{ t('665') }}</p>
      </div>
      <div class="infoBox width100 textCenter">
        <div class="flex">
          <div class="width15">{{ t('666') }}</div>
          <div class="width85">
            <div class="flex borderBottom">
              <div class="width82 colorYe borderRight"
                style="width: 82.5%;;line-height: 45px;font-size: 18px !important;">
                {{ data.title == 'OMG' ? t('667') : t('794') }}{{ data.api_url }}</div>
              <div class="width36" style="line-height: 40px;font-size: 13px !important;border-left: none;">
                {{ data.title == 'OMG' ? t('668') : t('795') }}</div>
            </div>
            <div class="flex">
              <div class="width82">{{ t('669') }}：{{ data.api_url }}/api/game/loadlist?trace_id=dhf1aboc1iio</div>
              <div class="width36">{{ data.tips_url }}</div>
            </div>
          </div>
        </div>
        <div class="flex borderTop borderBottom">
          <div class="width15">{{ t('670') }}</div>
          <div class="width85 flex">
            <div class="width82">{{ t('671') }}：{{ data.api_url }}/api/usr/ingame?trace_id=dhf1aboc1iio</div>
            <div class="width36">{{ data.tips_url }}</div>
          </div>
        </div>
        <div class="flex">
          <div class="width15">{{ t('672') }}</div>
          <div class="width85">
            <div class="flex borderBottom">
              <div class="width82">{{ t('673') }}：{{ data.api_url }}/api/player/v1/authorize?trace_id=dhf1aboc1iio</div>
              <div class="width36">{{ data.tips_url }}</div>
            </div>
            <div class="flex borderBottom">
              <div class="width82">{{ t('674') }}：{{ data.api_url }}/api/cash/v1/transfer?trace_id=dhf1aboc1iio</div>
              <div class="width36">{{ data.tips_url }}</div>
            </div>
            <div class="flex borderBottom">
              <div class="width82">{{ t('675') }}：{{ data.api_url }}/api/game/v1/entergame?trace_id=dhf1aboc1iio</div>
              <div class="width36">{{ data.tips_url }}</div>
            </div>
            <div class="flex borderBottom">
              <div class="width82">{{ t('676') }}：{{ data.api_url }}/api/cash/v1/getPlayerWallet?trace_id=dhf1aboc1iio
              </div>
              <div class="width36">{{ data.tips_url }}</div>
            </div>
            <div class="flex">
              <div class="width82">{{ t('677') }}：{{ data.api_url }}/api/cash/v1/transfer/status?trace_id=dhf1aboc1iio
              </div>
              <div class="width36">{{ data.tips_url }}</div>
            </div>
          </div>
        </div>
        <div class="flex borderTop" style="background-color: #d9ecff;">
          <div class="width15">{{ t('678') }}</div>
          <div class="width85 flex">
            <div class="width82">{{ t('679') }}：{{ data.web_url
              }}/api/v1/merchant/outer/record/GetGameRecordList?trace_id=6655421</div>
            <div class="width36">{{ data.tips_url }}</div>
          </div>
        </div>
        <div class="flex borderTop" style="background-color: #d9ecff;">
          <div class="width15">{{ t('680') }}</div>
          <div class="width85 flex">
            <div class="width82">{{ t('681') }}：{{ data.web_url }}/api/v1/merchant/outer/rtp/control?trace_id=561432143
            </div>
            <div class="width36">{{ data.tips_url }}</div>
          </div>
        </div>
      </div>
      <!-- 签名算法校验 -->
      <div class="check paddingTB10" style="border-top: none;">
        <p class="box-title textCenter paddingB10 borderBottom">{{ t('928') }}</p>
        <div class="flex marginT10 paddingL10">
          <p class="width150">{{ t('929') }}：</p>
          <el-input class="width320" type="text" :placeholder="t('19') + t('929')" v-model="data.signatureFrom.url"
            clearable />
          <el-button class="marginL20" type="primary" @click="checkInfo">{{ t('933') }}</el-button>
        </div>
        <div class="flex marginT10 paddingL10">
          <p class="width150">{{ t('930') }}：</p>
          <el-input class="width320" type="text" :placeholder="t('19') + t('930')" v-model="data.signatureFrom.json"
            clearable />
        </div>
        <div class="flex marginT10 paddingL10">
          <p class="width150">{{ t('931') }}：</p>
          <el-input class="width320" type="text" :placeholder="t('19') + t('931')" v-model="data.signatureFrom.key"
            clearable :disabled="true" />
        </div>
        <div class="flex marginT10 paddingL10">
          <p class="width150">{{ t('932') }}：</p>
          <el-input class="width320" type="textarea" :placeholder="t('932')" v-model="data.signatureFrom.md"
            :readonly="true" />
        </div>
      </div>
    </div>
  </div>
  <!-- 接入信息 -->
  <el-dialog v-model="data.isShowDetails" width="50%" :title="t('682')" :close-on-click-modal="false"
    :close-on-press-escape="false" @close="onHideDetails" top="20vh">
    <el-form :model="data.addQuery" class="addQuery" ref="addQuery" :rules="data.rules" status-icon
      :validate-on-rule-change="false">
      <form-item :title="t('94')" :pass="true" value="api_type">
        <el-select v-model="data.addQuery.api_type" disabled>
          <el-option v-for="item in APITYPE" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
        <div class="input-text">{{ $t('569') }}</div>
      </form-item>
      <form-item :title="t('92')" value="agent_url">
        <span class="box-title">{{ data.addQuery.agent_url }}</span>
        <div class="input-text">{{ $t('567') }}</div>
      </form-item>
      <form-item :title="t('93')" :pass="true" value="domain_name">
        <el-input class="width320" type="text" :placeholder="t('340') + t('93')" v-model="data.addQuery.domain_name"
          clearable>
          <template #prepend>https://</template>
        </el-input>
        <div class="input-text">{{ $t('568') }}</div>
      </form-item>
      <form-item :title="t('96')" :pass="true" value="key">
        <el-input class="width320" type="text" v-model="data.addQuery.key" clearable />
        <el-button class="marginL5" size="small" type="primary" @click="autoKey">{{ t('684') }}</el-button>
        <div class="input-text">{{ $t('572') }}</div>
      </form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="onHideDetails">{{ t('240') }}</el-button>
        <el-button type="primary" @click="save">{{ t('241') }}</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted } from 'vue'
import { APITYPE } from '@/config/eunm'
import FormItem from '@/components/FormItem/FormItem.vue'
import type { FormInstance } from 'element-plus/lib/components/form/index.js'
import { getDockingList, putChangeDocking, postSystemFandKey } from '@/api/settion'
import { selectToLabel, domainVerification, OperatorServerBrand } from '@/utils/index'
import { setTimestampTime } from '@/utils/time'
import { COUNTRY } from '@/config/country'
import { DEMOPLAY } from '@/config/eunm'
import { ElMessage } from 'element-plus'
import { Md5 } from "ts-md5"

import { useStore } from '@/stores/index'
const indexStore = useStore()
import { useI18n } from 'vue-i18n'
const { t } = useI18n()

const data = reactive({
  isShowDetails: false,
  api_url: OperatorServerBrand('api'),
  web_url: OperatorServerBrand('web'),
  tips_url: t('688') + '：POST',
  addQuery: {
    id: 0,
    domain_name: '',
    agent_url: OperatorServerBrand('api'),
    key: '',
    currency: '',
    api_type: 0,
    type: 'http://',
    link: ''
  },
  infoList: [
    { label: t('89'), key: 'app_id', value: 0, tips: t('566'), show: true },
    { label: t('90'), key: 'agent_name', value: '', tips: t('90'), show: true },
    { label: t('91'), key: 'area', value: '', tips: t('91'), show: true },
    { label: t('93'), key: 'domain_name', value: '', tips: t('568'), show: true },
    { label: t('94'), key: 'api_type', value: 0, tips: t('569'), show: true },
    { label: t('20'), key: 'status', value: 0, tips: t('571'), show: true },
    { label: t('96'), key: 'key', value: '', tips: t('572'), show: true },
    { label: t('24'), key: 'created_at', value: '', tips: t('573'), show: true },
    { label: indexStore.BackOperator == 'OMG' ? t('685') : t('796'), key: 'documentApi', value: '', show: true },
    { label: t('686'), key: 'password', value: 123456, tips: t('686'), show: true },
    { label: indexStore.BackOperator == 'OMG' ? t('687') : t('797'), key: 'document', value: '', tips: t('687'), show: true },
  ],
  rules: {
    domain_name: [{ required: true, message: t('340') + t('93'), trigger: 'blur' }],
    key: [{ required: true, message: t('19'), trigger: 'blur' }],
    account: [{ required: true, message: t('19'), trigger: 'blur' }],
  },
  lang: 'c_base_zh_cn',
  title: indexStore.BackOperator,
  signatureFrom: {
    url: '',
    json: '',
    key: '',
    md: '',
  },
})

onMounted(async () => {
  getSearchList()
  data.lang = localStorage.getItem('lang') as any
})

// 查询列表
const getSearchList = async () => {
  let res = await getDockingList({})
  data.infoList.forEach((item: any) => {
    Object.keys(res.data.list[0]).forEach((key: string) => {
      if (key == item.key) {
        item.value = res.data.list[0][key]
      }
    })
  })

  Object.assign(data.addQuery, res.data.list[0])
  data.signatureFrom.key = res.data.list[0]['key']
  // 跳转路径
  data.addQuery.type = addDomainFormat(res.data.list[0].link)
  data.addQuery.link = removeDomainFormat(res.data.list[0].link)
}

// 生成秘钥
const autoKey = async () => {
  let res = await postSystemFandKey({})
  data.addQuery.key = res.data
  data.signatureFrom.key = res.data
}

// 校验签名
const checkInfo = async () => {
  const md5: any = new Md5()
  md5.appendAsciiStr(data.signatureFrom.url + data.signatureFrom.json + data.signatureFrom.key)
  data.signatureFrom.md = md5.end()
}

// 保存
const addQuery = ref<FormInstance>()
const save = async () => {
  console.log(addQuery.value);
  if (!addQuery.value) return
  await addQuery.value.validate(async (valid, fields) => {
    if (valid) {
      // 域名格式校验
      let query = JSON.parse(JSON.stringify(data.addQuery))
      query.domain_name = domainVerification(query.domain_name)
      query.link = query.type+query.link
      await putChangeDocking(query)
      getSearchList()
      onHideDetails()
      ElMessage({
        message: t('342'),
        type: 'success'
      })
    }
  })
}
const saveLink = async () => {
  let query = JSON.parse(JSON.stringify(data.addQuery));
  query.is_change_api = 1
  // 域名格式校验
  query.domain_name = domainVerification(query.domain_name)
  query.link = query.type+query.link
  await putChangeDocking(query)
  getSearchList()
  ElMessage.success('保存成功')
}
const download = (url: string) => {
  window.open(url, '_blank')
}

const addDomainFormat = (val: string) => {
  if (!val) return ''
  // 正式服校验--域名是否携带 https:// 然后去除
  if (val.includes('http://')) {
    val = 'http://'
  }else{
    val = 'https://'
  }
  return val
}
const removeDomainFormat = (val: string) => {
  if (!val) return ''
  if (val.includes('http://')) {
    val = val.substring(7, val.length)
  }
  if (val.includes('https://')) {
    val = val.substring(8, val.length)
  }
  return val
}

// 重置
const onHideDetails = () => {
  data.isShowDetails = false
}
</script>
<style scoped lang="scss">
.title-title {
  padding: 10px 0;
  font-size: 21px;
  font-weight: 600;
  color: #444444;
  border: 1px solid #dddddd;
  border-bottom: none;
  text-align: center;
  margin-top: -1px
}

.borderLR {
  border-left: none;
  border-right: none;
}

.borderTop {
  border-top: 1px solid #dddddd;
}

.borderRight {
  border-right: 1px solid #dddddd;
}

.borderBottom {
  border-bottom: 1px solid #dddddd;
}

.borderLeft {
  border-left: 1px solid #dddddd;
}

.color44 {
  color: #444444;
}

.marginT55 {
  margin-top: 55px;
}

.check {
  border: 1px solid #dddddd;
  font-size: 14px !important;
  font-weight: bold;
}

.border {
  padding: 10px 5px 10px 5px;
  background-color: #fff;
  border-radius: 15px;

  .infoBox {
    border: 1px solid #dddddd;

    .contentItem {
      margin-left: -1px;
      margin-right: -1px;
      margin-bottom: -1px;
      border: 1px solid #dddddd;
    }

    div {
      line-height: 50px;
      font-size: 18px;
      font-weight: 600;
    }

    .width55 {
      border-left: 1px solid #dddddd;

      button {
        cursor: pointer;
        text-decoration: underline; //设置下划线
        text-underline-offset: 4px; //下划线和文字间距
        text-decoration-color: #67C23A; //下划线颜色
      }
    }

    .width65 {
      width: 65%;
      border-left: 1px solid #dddddd;

      .documentBtn {
        cursor: pointer;
        text-decoration: underline; //设置下划线
        text-underline-offset: 4px; //下划线和文字间距
        text-decoration-color: #67C23A; //下划线颜色
      }
    }

    .width55Currency {
      width: 65%;
      border-left: 1px solid #dddddd;
      font-size: 18px;
      font-weight: 600;
    }

  }

  .width58 {
    width: 58%;

    .width82 {
      width: 82%;
    }

    .width85 {
      margin-left: -1px;
      border-left: 1px solid #dddddd;
      font-size: 14px !important;
      font-weight: 400 !important;
      line-height: 25px;
    }

    .width20 {
      width: 18.2%;
    }

    .width82 {
      width: 82%;
      font-size: 14px !important;
      font-weight: 400 !important;
      line-height: 25px;
    }

    .width81 {
      width: 81.5% !important;
    }

    .width36 {
      width: 22%;
      border-left: 1px solid #dddddd;
      font-size: 14px !important;
      font-weight: 400 !important;
      line-height: 25px;
    }

    .width30 {
      font-size: 14px !important;
      font-weight: 400 !important;
      line-height: 25px;
    }
  }
}
</style>
